.container {
  height: 100%;

  :global {
    .sidebar {
      height: 100%;
      width: 200px;
      overflow: hidden;
      white-space: nowrap;
      background-image: linear-gradient(to top, #e4e4e4, #e7f0fd);
      transition: all 1s;
      .category {
        color: #2d2727;
        font-weight: bold;
        padding-left: 5px;
      }

      .item {
        display: block;
        height: 45px;
        cursor: pointer;
        color: #999;
        font-weight: 600;
        padding: 10px 20px;

        &:hover {
          background-color: #cbd5e6;
          color: #444;
        }
      }

      .active {
        background-color: #cbd5e6;
        color: #444;
        position: relative;

        &::after {
          position: absolute;
          right: 0;
          top: 0;
          width: 4px;
          height: 100%;
          background-color: #84baf0;
          content: "";
        }
      }
    }

    // checkbox选中，收起侧边栏
    .input-toggle {
      display: none;
      &:checked {
        & + .sidebar {
          width: 0px;
          & + label {
            .toggle {
              left: 0;
              opacity: 1;
            }
            .toggle::after {
              transform: translateX(2.5px) rotate(180deg);
            }
          }
        }
      }
    }

    //缩放按钮
    .toggle {
      position: absolute;
      height: 40px;
      width: 24px;
      border-radius: 0 12px 12px 0;
      background-color: #f0f0f0;
      top: 12px;
      left: 200px;
      cursor: pointer;
      z-index: 1;
      transition: left 1s, opacity 0.3s;
      opacity: 0;
      &:hover {
        opacity: 1;
      }
      //箭头
      &::after {
        position: absolute;
        left: 4px;
        top: calc(50% - 5px);
        border: 5px solid transparent;
        border-right-color: #999;
        transition: all 1s;
        transform: translateX(-2.5px);
        content: "";
      }
    }

    .sidebar:hover + label .toggle {
      opacity: 1;
    }
  }
}
